<template>
  <div v-if="isOpen">
    <el-dialog style="width: 1200px;height: 800px;top: -5vh;" title="我的文件" v-model="dialogAssVisible" @close="closeTree"
      @closed="closeTree">
      <div class="files-container">
        <!-- 文件夹 -->
        <div class="files-tree-box" v-loading="loading">
          <el-tree style="max-width: 400px;font-size: 12px;" :data="fileTreeList" :props="defaultProps" node-key="ID"
            :default-expanded-keys="[1]" highlight-current="true" @node-click="handleNodeClick">
          </el-tree>
        </div>

        <!-- 文件列表 -->
        <div class="files-table-box" v-loading="loading">
          <el-table ref="filesTableRef" style="font-size: 12px;" height="100%" :data="filesList" class="file-table"
            row-key="ID" @selection-change="handleSelectionChange">
            <el-table-column type="selection" :selectable="selectable" width="30" />
            <el-table-column label="文件名" min-width="280">
              <template #default="scope">
                <div class="file-name">
                  <el-icon class="file-icon">
                    <Document />
                  </el-icon>
                  {{ scope.row.file_name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="file_name_user_name" label="创建人" align="center" width="90" />
            <el-table-column prop="createAt" label="创建时间" align="center" width="140" />
            <el-table-column prop="UpdatedAt" label="修改时间" align="center" width="140" />
            <el-table-column prop="file_size" label="大小" width="60" />
          </el-table>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="defalut" @click="close">
            取消
          </el-button>
          <el-button type="primary" @click="handleAddFiles">添加</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, watch, defineProps, onMounted, nextTick } from 'vue';
import { GetDocumentTree, GetDocumentTreeFiles, } from '@/api/files/index';
import { ElMessage } from 'element-plus';
import type { TableInstance } from 'element-plus';

interface Tree {
  label: string,
  subtitle: string,
  version: string,
  description: string,
  parentId: number,
  children: Tree[],
  documentFiles: any,
  ID: number,
  createAt: string,
  UpdatedAt: string,
};
const loading = ref(false);

const props = defineProps<{
  isOpen: boolean,
}>();

// const emit = defineEmits<{
//   (e: 'update:isOpen', value : boolean): void
// }>();
const emit = defineEmits(['update:isOpen', 'add-files']);

const dialogAssVisible = ref(false);
const fileTreeList = ref<Tree[]>([]);// 文件夹列表
const filesList = ref<any>([]);// 文件列表
const filesTableRef = ref<TableInstance>();
const filesSelection = ref<any>([]);// 选中文件列表

watch(() => props.isOpen, (newVal) => {
  dialogAssVisible.value = newVal;
  if (newVal) {
    getAllFileTreeList();
  }
});

const closeTree = () => {
  // fileTreeList.value = [];
  fileTreeList.value = [];
  filesList.value = [];
  filesSelection.value = [];
  filesTableRef.value?.clearSelection();
  emit('update:isOpen', false);
};
const close = () => {
  fileTreeList.value = [];
  filesList.value = [];
  filesSelection.value = [];
  filesTableRef.value?.clearSelection();
  emit('update:isOpen', false);
};

// TODO 获取文件夹列表
const getAllFileTreeList = async () => {
  loading.value = true;
  const { data } = await GetDocumentTree();
  if (data.code === 200) {
    fileTreeList.value = data.data;

    if (data.data.length > 0) {
      await loadFolderFiles(data.data[0].ID);
    }
    loading.value = false;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
};

const defaultProps = {
  children: 'children',
  label: 'label',
};

// 加载文件夹中文件列表
const loadFolderFiles = async (folderId: number) => {
  loading.value = true;
  try {
    const { data } = await GetDocumentTreeFiles(folderId);
    if (data.code === 200) {
      filesList.value = data.data;
      loading.value = false;
    } else {
      ElMessage.error(data.msg);
      loading.value = false;
    }
  } finally {
    loading.value = false;
  }
};


// TODO 获取文件列表
const handleNodeClick = async (val: Tree) => {
  await loadFolderFiles(val.ID);
};

// TODO 选择要关联的文件
const selectable = (row: any) => ![1].includes(row.ID);
const handleSelectionChange = (val: any) => {
  filesSelection.value = val.map((item: any) => item.file_url);
};


// TODO 确定关联文件
const handleAddFiles = () => {
  emit("add-files", filesSelection.value);
  close();
};



// onMounted(() => {
//   getAllFileTreeList();
// });
</script>

<style lang="scss" scoped>
.files-container {
  width: 100%;
  height: 600px;
  display: flex;
  flex-wrap: row;
  font-size: 12px;

  // 文件夹区域
  .files-tree-box {
    width: 400px;
    height: 100%;
    overflow-y: auto;
    margin-right: 5px;
    font-size: 12px;
  }

  ;

  // 文档区域
  .files-table-box {
    width: calc(100% - 405px);
    font-size: 12px;
  }

}
</style>
<style>
/* 修改选中行的背景色 */
.el-table__body tr.el-table__row.selected>td {
  background-color: #f0f7ff;
}
</style>